<div class="container main">
    <div class="row">

        <div class="col middle-column big-middle-column">
            <div class="article">
                <div class="article-heading">
                    <h2>Flex 布局语法教程</h2>				<h3><em>分类</em> <a href="/w3cnote_genre/code" title="编程技术">编程技术</a> </h3>
                </div>
                <div class="article-body note-body">
                    <div class="article-intro">
                        <!-- ad start-->
                        <div class="archive-list-item"><script async="" src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-5751451760833794" crossorigin="anonymous" data-checked-head="true"></script>
                            <ins class="adsbygoogle" style="display: block; height: 113px;" data-ad-format="fluid" data-ad-layout-key="-ha-b+1l-3j+4p" data-ad-client="ca-pub-5751451760833794" data-ad-slot="1838418016" data-adsbygoogle-status="done" data-ad-status="unfilled"><div id="aswift_1_host" style="border: none; height: 113px; width: 915px; margin: 0px; padding: 0px; position: relative; visibility: visible; background-color: transparent; display: inline-block;"><iframe id="aswift_1" name="aswift_1" browsingtopics="true" style="left:0;position:absolute;top:0;border:0;width:915px;height:113px;" sandbox="allow-forms allow-popups allow-popups-to-escape-sandbox allow-same-origin allow-scripts allow-top-navigation-by-user-activation" width="915" height="113" frameborder="0" marginwidth="0" marginheight="0" vspace="0" hspace="0" allowtransparency="true" scrolling="no" allow="attribution-reporting" src="https://googleads.g.doubleclick.net/pagead/ads?client=ca-pub-5751451760833794&amp;output=html&amp;h=113&amp;slotname=1838418016&amp;adk=2833806146&amp;adf=4227699301&amp;pi=t.ma~as.1838418016&amp;w=915&amp;abgtt=6&amp;lmt=1722154682&amp;rafmt=11&amp;format=915x113&amp;url=https%3A%2F%2Fwww.runoob.com%2Fw3cnote%2Fflex-grammar.html&amp;wgl=1&amp;uach=WyJtYWNPUyIsIjE0LjUuMCIsImFybSIsIiIsIjEyNy4wLjY1MzMuNzMiLG51bGwsMCxudWxsLCI2NCIsW1siTm90KUE7QnJhbmQiLCI5OS4wLjAuMCJdLFsiR29vZ2xlIENocm9tZSIsIjEyNy4wLjY1MzMuNzMiXSxbIkNocm9taXVtIiwiMTI3LjAuNjUzMy43MyJdXSwwXQ..&amp;dt=1722154682857&amp;bpp=2&amp;bdt=27&amp;idt=53&amp;shv=r20240724&amp;mjsv=m202407230101&amp;ptt=9&amp;saldr=aa&amp;abxe=1&amp;cookie=ID%3D4f6c4e2d2703afdb%3AT%3D1722154259%3ART%3D1722154646%3AS%3DALNI_MZmhnYOfU86ErJjaQTiOcFSUmcpSA&amp;gpic=UID%3D00000ea9e0ea009e%3AT%3D1722154259%3ART%3D1722154646%3AS%3DALNI_Ma6R0Lfe-wlpG-8uTaRnufpzBGkag&amp;eo_id_str=ID%3Ddf78ec3d09463999%3AT%3D1722154259%3ART%3D1722154646%3AS%3DAA-AfjYB57hCpWsJvQ99wuzf4lcT&amp;prev_fmts=0x0&amp;nras=1&amp;correlator=3888171713281&amp;frm=20&amp;pv=1&amp;ga_vid=866128243.1722154257&amp;ga_sid=1722154683&amp;ga_hid=2145822630&amp;ga_fc=1&amp;u_tz=480&amp;u_his=1&amp;u_h=960&amp;u_w=1280&amp;u_ah=960&amp;u_aw=1280&amp;u_cd=24&amp;u_sd=1&amp;dmc=8&amp;adx=41&amp;ady=312&amp;biw=997&amp;bih=829&amp;scr_x=0&amp;scr_y=0&amp;eid=44759875%2C44759926%2C44759842%2C31085512%2C95334828%2C95337868%2C95338229%2C95338257%2C31084186%2C95336267%2C21065725%2C31078663%2C31078668%2C31078670&amp;oid=2&amp;pvsid=1366516457410678&amp;tmod=1920801447&amp;uas=0&amp;nvt=2&amp;ref=https%3A%2F%2Fcn.bing.com%2F&amp;fc=1920&amp;brdim=22%2C22%2C22%2C22%2C1280%2C0%2C1248%2C916%2C997%2C829&amp;vis=1&amp;rsz=%7C%7CeoE%7C&amp;abl=CS&amp;pfx=0&amp;fu=128&amp;bc=31&amp;bz=1.25&amp;psd=W251bGwsbnVsbCxudWxsLDNd&amp;nt=1&amp;ifi=2&amp;uci=a!2&amp;fsb=1&amp;dtd=56" data-google-container-id="a!2" tabindex="0" title="Advertisement" aria-label="Advertisement" data-load-complete="true" data-google-query-id="CKnmoZKmyYcDFdluDwId60wa_g"></iframe></div></ins>
                            <script>
                                (adsbygoogle = window.adsbygoogle || []).push({});
                            </script></div>
                        <!-- ad end-->
                        <p>网页布局（layout）是CSS的一个重点应用。</p>
                        <p><img decoding="async" title="" src="//www.runoob.com/wp-content/uploads/2015/07/7bf8bed24a17fbebd3e171f9630dbccb.gif" alt=""></p>
                        <p>布局的传统解决方案，基于<a href="https://developer.mozilla.org/en-US/docs/Web/CSS/box_model" target="_blank">盒状模型</a>，依赖&nbsp;<a href="https://developer.mozilla.org/en-US/docs/Web/CSS/display" target="_blank">display</a>属性 +&nbsp;<a href="https://developer.mozilla.org/en-US/docs/Web/CSS/position" target="_blank">position</a>属性 +&nbsp;<a href="https://developer.mozilla.org/en-US/docs/Web/CSS/float" target="_blank">float</a>属性。它对于那些特殊布局非常不方便，比如，<a href="https://css-tricks.com/centering-css-complete-guide/" target="_blank">垂直居中</a>就不容易实现。</p>
                        <p><img decoding="async" title="" src="//www.runoob.com/wp-content/uploads/2015/07/5a7d00514af1e464221c677c15e8e990.png" alt=""></p>
                        <p>2009年，W3C提出了一种新的方案—-Flex布局，可以简便、完整、响应式地实现各种页面布局。目前，它已经得到了所有浏览器的支持，这意味着，现在就能很安全地使用这项功能。</p>
                        <p><img decoding="async" title="" src="//www.runoob.com/wp-content/uploads/2015/07/8712d713c7d0b884a5cb9770efc422b4.jpg" alt=""></p>
                        <p>Flex布局将成为未来布局的首选方案。本文介绍Flex布局的语法。</p>
                        <p>以下内容主要参考了下面两篇文章：<a href="https://css-tricks.com/snippets/css/a-guide-to-flexbox/" target="_blank">A Complete Guide to Flexbox</a>&nbsp;和&nbsp;<a href="https://scotch.io/tutorials/a-visual-guide-to-css3-flexbox-properties" target="_blank">A Visual Guide to CSS3 Flexbox Properties</a>。</p>
                        <h2>一、Flex布局是什么？</h2>
                        <p>Flex是Flexible Box的缩写，意为”弹性布局”，用来为盒状模型提供最大的灵活性。</p>
                        <p>任何一个容器都可以指定为Flex布局。</p>
                        <pre class="prettyprint prettyprinted" style=""><span class="pun">.</span><span class="pln">box</span><span class="pun">{</span><span class="pln">
  display</span><span class="pun">:</span><span class="pln"> flex</span><span class="pun">;</span><span class="pln">
</span><span class="pun">}</span><button class="copy-code-button" type="button" data-clipboard-text=".box{
  display: flex;
}"></button></pre>
                        <p>行内元素也可以使用Flex布局。</p>
                        <pre class="prettyprint prettyprinted" style=""><span class="pun">.</span><span class="pln">box</span><span class="pun">{</span><span class="pln">
  display</span><span class="pun">:</span><span class="pln"> </span><span class="kwd">inline</span><span class="pun">-</span><span class="pln">flex</span><span class="pun">;</span><span class="pln">
</span><span class="pun">}</span><button class="copy-code-button" type="button" data-clipboard-text=".box{
  display: inline-flex;
}"></button></pre>
                        <p>Webkit内核的浏览器，必须加上-webkit前缀。</p>
                        <pre class="prettyprint prettyprinted" style=""><span class="pun">.</span><span class="pln">box</span><span class="pun">{</span><span class="pln">
  display</span><span class="pun">:</span><span class="pln"> </span><span class="pun">-</span><span class="pln">webkit</span><span class="pun">-</span><span class="pln">flex</span><span class="pun">;</span><span class="pln"> </span><span class="com">/* Safari */</span><span class="pln">
  display</span><span class="pun">:</span><span class="pln"> flex</span><span class="pun">;</span><span class="pln">
</span><span class="pun">}</span><button class="copy-code-button" type="button" data-clipboard-text=".box{
  display: -webkit-flex; /* Safari */
  display: flex;
}"></button></pre>
                        <p>注意，设为Flex布局以后，子元素的float、clear和vertical-align属性将失效。</p>
                        <h2>二、基本概念</h2>
                        <p>采用Flex布局的元素，称为Flex容器（flex container），简称”容器”。它的所有子元素自动成为容器成员，称为Flex项目（flex item），简称”项目”。</p>
                        <p><img decoding="async" title="" src="//www.runoob.com/wp-content/uploads/2015/07/3791e575c48b3698be6a94ae1dbff79d.png" alt=""></p>
                        <p>容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）。主轴的开始位置（与边框的交叉点）叫做main start，结束位置叫做main end；交叉轴的开始位置叫做cross start，结束位置叫做cross end。</p>
                        <p>项目默认沿主轴排列。单个项目占据的主轴空间叫做main size，占据的交叉轴空间叫做cross size。</p>
                        <h2>三、容器的属性</h2>
                        <p>以下6个属性设置在容器上。</p>
                        <blockquote>
                            <ul>
                                <li>flex-direction</li>
                                <li>flex-wrap</li>
                                <li>flex-flow</li>
                                <li>justify-content</li>
                                <li>align-items</li>
                                <li>align-content</li>
                            </ul>
                        </blockquote>
                        <h3>3.1 flex-direction属性</h3>
                        <p>flex-direction属性决定主轴的方向（即项目的排列方向）。</p>
                        <pre class="prettyprint prettyprinted" style=""><span class="pun">.</span><span class="pln">box </span><span class="pun">{</span><span class="pln">
  flex</span><span class="pun">-</span><span class="pln">direction</span><span class="pun">:</span><span class="pln"> row </span><span class="pun">|</span><span class="pln"> row</span><span class="pun">-</span><span class="pln">reverse </span><span class="pun">|</span><span class="pln"> column </span><span class="pun">|</span><span class="pln"> column</span><span class="pun">-</span><span class="pln">reverse</span><span class="pun">;</span><span class="pln">
</span><span class="pun">}</span><button class="copy-code-button" type="button" data-clipboard-text=".box {
  flex-direction: row | row-reverse | column | column-reverse;
}"></button></pre>
                        <p><img decoding="async" title="" src="//www.runoob.com/wp-content/uploads/2015/07/0cbe5f8268121114e87d0546e53cda6e.png" alt=""></p>
                        <p>它可能有4个值。</p>
                        <blockquote>
                            <ul>
                                <li>row（默认值）：主轴为水平方向，起点在左端。</li>
                                <li>row-reverse：主轴为水平方向，起点在右端。</li>
                                <li>column：主轴为垂直方向，起点在上沿。</li>
                                <li>column-reverse：主轴为垂直方向，起点在下沿。</li>
                            </ul>
                        </blockquote>
                        <h3>3.2 flex-wrap属性</h3>
                        <p>默认情况下，项目都排在一条线（又称”轴线”）上。flex-wrap属性定义，如果一条轴线排不下，如何换行。</p>
                        <p><img decoding="async" title="" src="//www.runoob.com/wp-content/uploads/2015/07/903d5b7df55779c03f2687a7d4d6bcea.png" alt=""></p>
                        <pre class="prettyprint prettyprinted" style=""><span class="pun">.</span><span class="pln">box</span><span class="pun">{</span><span class="pln">
  flex</span><span class="pun">-</span><span class="pln">wrap</span><span class="pun">:</span><span class="pln"> nowrap </span><span class="pun">|</span><span class="pln"> wrap </span><span class="pun">|</span><span class="pln"> wrap</span><span class="pun">-</span><span class="pln">reverse</span><span class="pun">;</span><span class="pln">
</span><span class="pun">}</span><button class="copy-code-button" type="button" data-clipboard-text=".box{
  flex-wrap: nowrap | wrap | wrap-reverse;
}"></button></pre>
                        <p>它可能取三个值。</p>
                        <p>（1）nowrap（默认）：不换行。</p>
                        <p><img decoding="async" title="" src="//www.runoob.com/wp-content/uploads/2015/07/9da1f23965756568b4c6ea7124db7b9a.png" alt=""></p>
                        <p>（2）wrap：换行，第一行在上方。</p>
                        <p><img decoding="async" title="" src="//www.runoob.com/wp-content/uploads/2015/07/3c6b3c8b8fe5e26bca6fb57538cf72d9.jpg" alt=""></p>
                        <p>（3）wrap-reverse：换行，第一行在下方。</p>
                        <p><img decoding="async" title="" src="//www.runoob.com/wp-content/uploads/2015/07/fb4cf2bab8b6b744b64f6d7a99cd577c.jpg" alt=""></p>
                        <h3>3.3 flex-flow</h3>
                        <p>flex-flow属性是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap。</p>
                        <pre class="prettyprint prettyprinted" style=""><span class="pun">.</span><span class="pln">box </span><span class="pun">{</span><span class="pln">
  flex</span><span class="pun">-</span><span class="pln">flow</span><span class="pun">:</span><span class="pln"> </span><span class="pun">&lt;</span><span class="pln">flex</span><span class="pun">-</span><span class="pln">direction</span><span class="pun">&gt;</span><span class="pln"> </span><span class="pun">&lt;</span><span class="pln">flex</span><span class="pun">-</span><span class="pln">wrap</span><span class="pun">&gt;;</span><span class="pln">
</span><span class="pun">}</span><button class="copy-code-button" type="button" data-clipboard-text=".box {
  flex-flow: <flex-direction> <flex-wrap>;
}"></button></pre>
                        <h3>3.4 justify-content属性</h3>
                        <p>justify-content属性定义了项目在主轴上的对齐方式。</p>
                        <pre class="prettyprint prettyprinted" style=""><span class="pun">.</span><span class="pln">box </span><span class="pun">{</span><span class="pln">
  justify</span><span class="pun">-</span><span class="pln">content</span><span class="pun">:</span><span class="pln"> flex</span><span class="pun">-</span><span class="pln">start </span><span class="pun">|</span><span class="pln"> flex</span><span class="pun">-</span><span class="kwd">end</span><span class="pln"> </span><span class="pun">|</span><span class="pln"> center </span><span class="pun">|</span><span class="pln"> space</span><span class="pun">-</span><span class="pln">between </span><span class="pun">|</span><span class="pln"> space</span><span class="pun">-</span><span class="pln">around</span><span class="pun">;</span><span class="pln">
</span><span class="pun">}</span><button class="copy-code-button" type="button" data-clipboard-text=".box {
  justify-content: flex-start | flex-end | center | space-between | space-around;
}"></button></pre>
                        <p><img decoding="async" title="" src="//www.runoob.com/wp-content/uploads/2015/07/c55dfe8e3422458b50e985552ef13ba5.png" alt=""></p>
                        <p>它可能取5个值，具体对齐方式与轴的方向有关。下面假设主轴为从左到右。</p>
                        <blockquote>
                            <ul>
                                <li>flex-start（默认值）：左对齐</li>
                                <li>flex-end：右对齐</li>
                                <li>center： 居中</li>
                                <li>space-between：两端对齐，项目之间的间隔都相等。</li>
                                <li>space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。</li>
                            </ul>
                        </blockquote>
                        <h3>3.5 align-items属性</h3>
                        <p>align-items属性定义项目在交叉轴上如何对齐。</p>
                        <pre class="prettyprint prettyprinted" style=""><span class="pun">.</span><span class="pln">box </span><span class="pun">{</span><span class="pln">
  align</span><span class="pun">-</span><span class="pln">items</span><span class="pun">:</span><span class="pln"> flex</span><span class="pun">-</span><span class="pln">start </span><span class="pun">|</span><span class="pln"> flex</span><span class="pun">-</span><span class="kwd">end</span><span class="pln"> </span><span class="pun">|</span><span class="pln"> center </span><span class="pun">|</span><span class="pln"> baseline </span><span class="pun">|</span><span class="pln"> stretch</span><span class="pun">;</span><span class="pln">
</span><span class="pun">}</span><button class="copy-code-button" type="button" data-clipboard-text=".box {
  align-items: flex-start | flex-end | center | baseline | stretch;
}"></button></pre>
                        <p><img decoding="async" title="" src="//www.runoob.com/wp-content/uploads/2015/07/2b0c39c7e7a80d5a784c8c2ca63cde17.png" alt=""></p>
                        <p>它可能取5个值。具体的对齐方式与交叉轴的方向有关，下面假设交叉轴从上到下。</p>
                        <blockquote>
                            <ul>
                                <li>flex-start：交叉轴的起点对齐。</li>
                                <li>flex-end：交叉轴的终点对齐。</li>
                                <li>center：交叉轴的中点对齐。</li>
                                <li>baseline: 项目的第一行文字的基线对齐。</li>
                                <li>stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。</li>
                            </ul>
                        </blockquote>
                        <h3>3.6 align-content属性</h3>
                        <p>align-content属性定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。</p>
                        <pre class="prettyprint prettyprinted" style=""><span class="pun">.</span><span class="pln">box </span><span class="pun">{</span><span class="pln">
  align</span><span class="pun">-</span><span class="pln">content</span><span class="pun">:</span><span class="pln"> flex</span><span class="pun">-</span><span class="pln">start </span><span class="pun">|</span><span class="pln"> flex</span><span class="pun">-</span><span class="kwd">end</span><span class="pln"> </span><span class="pun">|</span><span class="pln"> center </span><span class="pun">|</span><span class="pln"> space</span><span class="pun">-</span><span class="pln">between </span><span class="pun">|</span><span class="pln"> space</span><span class="pun">-</span><span class="pln">around </span><span class="pun">|</span><span class="pln"> stretch</span><span class="pun">;</span><span class="pln">
</span><span class="pun">}</span><button class="copy-code-button" type="button" data-clipboard-text=".box {
  align-content: flex-start | flex-end | center | space-between | space-around | stretch;
}"></button></pre>
                        <p><img decoding="async" title="" src="//www.runoob.com/wp-content/uploads/2015/07/f10918ccb8a13247c9d47715a2bd2c33.png" alt=""></p>
                        <p>该属性可能取6个值。</p>
                        <blockquote>
                            <ul>
                                <li>flex-start：与交叉轴的起点对齐。</li>
                                <li>flex-end：与交叉轴的终点对齐。</li>
                                <li>center：与交叉轴的中点对齐。</li>
                                <li>space-between：与交叉轴两端对齐，轴线之间的间隔平均分布。</li>
                                <li>space-around：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。</li>
                                <li>stretch（默认值）：轴线占满整个交叉轴。</li>
                            </ul>
                        </blockquote>
                        <h3>四、项目的属性</h3>
                        <p>以下6个属性设置在项目上。</p>
                        <blockquote>
                            <ul>
                                <li>order</li>
                                <li>flex-grow</li>
                                <li>flex-shrink</li>
                                <li>flex-basis</li>
                                <li>flex</li>
                                <li>align-self</li>
                            </ul>
                        </blockquote>
                        <h3>4.1 order属性</h3>
                        <p>order属性定义项目的排列顺序。数值越小，排列越靠前，默认为0。</p>
                        <pre class="prettyprint prettyprinted" style=""><span class="pun">.</span><span class="pln">item </span><span class="pun">{</span><span class="pln">
  order</span><span class="pun">:</span><span class="pln"> </span><span class="str">&lt;integer&gt;</span><span class="pun">;</span><span class="pln">
</span><span class="pun">}</span><button class="copy-code-button" type="button" data-clipboard-text=".item {
  order: <integer>;
}"></button></pre>
                        <p><img decoding="async" title="" src="//www.runoob.com/wp-content/uploads/2015/07/59e399c72daafcfcc20ede36bf32f266.png" alt=""></p>
                        <h3>4.2 flex-grow属性</h3>
                        <p>flex-grow属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。</p>
                        <pre class="prettyprint prettyprinted" style=""><span class="pun">.</span><span class="pln">item </span><span class="pun">{</span><span class="pln">
  flex</span><span class="pun">-</span><span class="pln">grow</span><span class="pun">:</span><span class="pln"> </span><span class="str">&lt;number&gt;</span><span class="pun">;</span><span class="pln"> </span><span class="com">/* default 0 */</span><span class="pln">
</span><span class="pun">}</span><button class="copy-code-button" type="button" data-clipboard-text=".item {
  flex-grow: <number>; /* default 0 */
}"></button></pre>
                        <p><img decoding="async" title="" src="//www.runoob.com/wp-content/uploads/2015/07/f41c08bb35962ed79e7686f735d6cd78.png" alt=""></p>
                        <p>如果所有项目的flex-grow属性都为1，则它们将等分剩余空间（如果有的话）。如果一个项目的flex-grow属性为2，其他项目都为1，则前者占据的剩余空间将比其他项多一倍。</p>
                        <h3>4.3 flex-shrink属性</h3>
                        <p>flex-shrink属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。</p>
                        <pre class="prettyprint prettyprinted" style=""><span class="pun">.</span><span class="pln">item </span><span class="pun">{</span><span class="pln">
  flex</span><span class="pun">-</span><span class="pln">shrink</span><span class="pun">:</span><span class="pln"> </span><span class="str">&lt;number&gt;</span><span class="pun">;</span><span class="pln"> </span><span class="com">/* default 1 */</span><span class="pln">
</span><span class="pun">}</span><button class="copy-code-button" type="button" data-clipboard-text=".item {
  flex-shrink: <number>; /* default 1 */
}"></button></pre>
                        <p><img decoding="async" title="" src="//www.runoob.com/wp-content/uploads/2015/07/240d3e960043a729bb3ff5e34987904f.jpg" alt=""></p>
                        <p>如果所有项目的flex-shrink属性都为1，当空间不足时，都将等比例缩小。如果一个项目的flex-shrink属性为0，其他项目都为1，则空间不足时，前者不缩小。</p>
                        <p>负值对该属性无效。</p>
                        <h3>4.4 flex-basis属性</h3>
                        <p>flex-basis属性定义了在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。</p>
                        <pre class="prettyprint prettyprinted" style=""><span class="pun">.</span><span class="pln">item </span><span class="pun">{</span><span class="pln">
  flex</span><span class="pun">-</span><span class="pln">basis</span><span class="pun">:</span><span class="pln"> </span><span class="str">&lt;length&gt;</span><span class="pln"> </span><span class="pun">|</span><span class="pln"> </span><span class="kwd">auto</span><span class="pun">;</span><span class="pln"> </span><span class="com">/* default auto */</span><span class="pln">
</span><span class="pun">}</span><button class="copy-code-button" type="button" data-clipboard-text=".item {
  flex-basis: <length> | auto; /* default auto */
}"></button></pre>
                        <p>它可以设为跟width或height属性一样的值（比如350px），则项目将占据固定空间。</p>
                        <h3>4.5 flex属性</h3>
                        <p>flex属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选。</p>
                        <pre class="prettyprint prettyprinted" style=""><span class="pun">.</span><span class="pln">item </span><span class="pun">{</span><span class="pln">
  flex</span><span class="pun">:</span><span class="pln"> none </span><span class="pun">|</span><span class="pln"> </span><span class="pun">[</span><span class="pln"> </span><span class="pun">&lt;</span><span class="str">'flex-grow'</span><span class="pun">&gt;</span><span class="pln"> </span><span class="pun">&lt;</span><span class="str">'flex-shrink'</span><span class="pun">&gt;?</span><span class="pln"> </span><span class="pun">||</span><span class="pln"> </span><span class="pun">&lt;</span><span class="str">'flex-basis'</span><span class="pun">&gt;</span><span class="pln"> </span><span class="pun">]</span><span class="pln">
</span><span class="pun">}</span><button class="copy-code-button" type="button" data-clipboard-text=".item {
  flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
}"></button></pre>
                        <p>该属性有两个快捷值：auto (1 1 auto) 和 none (0 0 auto)。</p>
                        <p>建议优先使用这个属性，而不是单独写三个分离的属性，因为浏览器会推算相关值。</p>
                        <h3>4.6 align-self属性</h3>
                        <p>align-self属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。</p>
                        <pre class="prettyprint prettyprinted" style=""><span class="pun">.</span><span class="pln">item </span><span class="pun">{</span><span class="pln">
  align</span><span class="pun">-</span><span class="kwd">self</span><span class="pun">:</span><span class="pln"> </span><span class="kwd">auto</span><span class="pln"> </span><span class="pun">|</span><span class="pln"> flex</span><span class="pun">-</span><span class="pln">start </span><span class="pun">|</span><span class="pln"> flex</span><span class="pun">-</span><span class="kwd">end</span><span class="pln"> </span><span class="pun">|</span><span class="pln"> center </span><span class="pun">|</span><span class="pln"> baseline </span><span class="pun">|</span><span class="pln"> stretch</span><span class="pun">;</span><span class="pln">
</span><span class="pun">}</span><button class="copy-code-button" type="button" data-clipboard-text=".item {
  align-self: auto | flex-start | flex-end | center | baseline | stretch;
}"></button></pre>
                        <p><img decoding="async" title="" src="//www.runoob.com/wp-content/uploads/2015/07/55b19171b8b6b9487d717bf2ecbba6de.png" alt=""></p>
                        <p>该属性可能取6个值，除了auto，其他都与align-items属性完全一致。</p>


                        <blockquote>
                            <p>来源：http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html</p></blockquote>

                    </div>
                </div>
                <div class="previous-next-links">
                    <div class="previous-design-link">← <a href="http://www.runoob.com/w3cnote/java-collections.html" rel="prev"> Java集合的小抄 Java初学者必备</a> </div>
                    <div class="next-design-link"><a href="http://www.runoob.com/w3cnote/php-chart-app.html" rel="next"> PHP实现最简单的聊天室应用</a> →</div>
                </div>
                <style>
                    .wrapper {
                      /*text-transform: uppercase; */
                      background: #ececec;
                      color: #555;
                      cursor: pointer;
                      font-family: "Gill Sans", Impact, sans-serif;
                      font-size: 20px;
                      position: relative;
                      text-align: center;
                      width: 200px;
                      -webkit-transform: translateZ(0); /* webkit flicker fix */
                      -webkit-font-smoothing: antialiased; /* webkit text rendering fix */
                    }

                    .wrapper .tooltip {
                      white-space: nowrap;
                      font-size: 14px;
                      text-align: left;
                      background: #96b97d;
                      bottom: 100%;
                      color: #fff;
                      display: block;
                      left: -25px;
                      margin-bottom: 15px;
                      opacity: 0;
                      padding: 14px;
                      pointer-events: none;
                      position: absolute;

                      -webkit-transform: translateY(10px);
                         -moz-transform: translateY(10px);
                          -ms-transform: translateY(10px);
                           -o-transform: translateY(10px);
                              transform: translateY(10px);
                      -webkit-transition: all .25s ease-out;
                         -moz-transition: all .25s ease-out;
                          -ms-transition: all .25s ease-out;
                           -o-transition: all .25s ease-out;
                              transition: all .25s ease-out;
                      -webkit-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);
                         -moz-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);
                          -ms-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);
                           -o-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);
                              box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);
                    }
                    .tooltip a {
                        color:#fff;
                    }
                    /* This bridges the gap so you can mouse into the tooltip without it disappearing */
                    .wrapper .tooltip:before {
                      bottom: -20px;
                      content: " ";
                      display: block;
                      height: 20px;
                      left: 0;
                      position: absolute;
                      width: 100%;
                    }

                    /* CSS Triangles - see Trevor's post */
                    .wrapper .tooltip:after {
                      border-left: solid transparent 10px;
                      border-right: solid transparent 10px;
                      border-top: solid #96b97d 10px;
                      bottom: -10px;
                      content: " ";
                      height: 0;
                      left: 20%;
                      margin-left: -13px;
                      position: absolute;
                      width: 0;
                    }
                    .wrapper .tooltip1 {
                        margin-left: 50px;
                        padding-top: 0px;
                    }
                    /*
                    .wrapper:hover .tooltip {
                      opacity: 1;
                      pointer-events: auto;
                      -webkit-transform: translateY(0px);
                         -moz-transform: translateY(0px);
                          -ms-transform: translateY(0px);
                           -o-transform: translateY(0px);
                              transform: translateY(0px);
                    }
                    */
                    /* IE can just show/hide with no transition */
                    .lte8 .wrapper .tooltip {
                      display: none;
                    }

                    .lte8 .wrapper:hover .tooltip {
                      display: block;
                    }

                </style>

                <link rel="stylesheet" href="https://static.jyshare.com/assets/upvotejs/dist/upvotejs/upvotejs.css">
                <script src="https://static.jyshare.com/assets/upvotejs/dist/upvotejs/upvotejs.vanilla.js"></script>
                <script src="https://static.jyshare.com/assets/upvotejs/dist/upvotejs/upvotejs.jquery.js"></script>
                <div id="respond" class="no_webshot">
                    <div class="comment-signarea" style=" padding: 20px 20px;">
                        <h3 class="text-muted" id="share_code" style="color: #799961;"><i class="fa fa-pencil-square-o" aria-hidden="true"></i> 点我分享笔记</h3>
                        <!--
                        <p style="font-size:14px;">笔记需要是本篇文章的内容扩展！</p><br>
                        <p style="font-size:12px;"><a href="//www.runoob.com/tougao" target="_blank">文章投稿，可点击这里</a></p>
                        <p style="font-size:14px;"><a href="/w3cnote/runoob-user-test-intro.html#invite" target="_blank">注册邀请码获取方式</a></p>
                            <h3 class="text-muted"><i class="fa fa-info-circle" aria-hidden="true"></i> 分享笔记前必须<a href="javascript:;" class="runoob-pop">登录</a>！</h3>
                            <p><a href="/w3cnote/runoob-user-test-intro.html#invite" target="_blank">注册邀请码获取方式</a></p>-->
                    </div>

                    <form action="/wp-content/themes/runoob/option/addnote.php" method="post" id="commentform" style="display:none;"><div id="comment-status" style="display:none;"></div>
                        <div class="comt">
                            <div class="comt-title">
                                <i style="font-size:36px;" class="fa fa-user-circle" aria-hidden="true"></i>				<p><a id="cancel-comment-reply-link" href="javascript:;">取消</a></p>
                            </div>
                            <div class="comt-box">
                                <div class="simditor simditor-mac">
                                    <div class="simditor-wrapper"><div class="simditor-toolbar" style="top: 0px; width: 0px; left: 0px;"><ul><li><a tabindex="-1" unselectable="on" class="toolbar-item toolbar-item-bold" href="javascript:;" title="加粗文字 ( Cmd + b )"><span class="simditor-icon simditor-icon-bold"></span></a></li><li><a tabindex="-1" unselectable="on" class="toolbar-item toolbar-item-code" href="javascript:;" title="插入代码"><span class="simditor-icon simditor-icon-code"></span></a></li><li><a tabindex="-1" unselectable="on" class="toolbar-item toolbar-item-ul" href="javascript:;" title="无序列表 ( Cmd + . )"><span class="simditor-icon simditor-icon-list-ul"></span></a></li><li><a tabindex="-1" unselectable="on" class="toolbar-item toolbar-item-ol" href="javascript:;" title="有序列表 ( Cmd + / )"><span class="simditor-icon simditor-icon-list-ol"></span></a></li><li><a tabindex="-1" unselectable="on" class="toolbar-item toolbar-item-image" href="javascript:;" title="插入图片"><span class="simditor-icon simditor-icon-picture-o"></span></a></li></ul></div>
                                        <div class="simditor-placeholder" style="display: block; top: 1px;">写笔记...</div>
                                        <div class="simditor-body" contenteditable="true"><p><br></p></div>
                                        <div id="mded"></div></div>
                                    <div class="simditor-popover code-popover"><div class="code-settings">
                                        <div class="settings-field">
                                            <select class="select-lang">
                                                <option value="-1">选择程序语言</option>
                                                <option value="bash">Bash</option><option value="c++">C++</option><option value="cs">C#</option><option value="css">CSS</option><option value="erlang">Erlang</option><option value="less">Less</option><option value="sass">Sass</option><option value="diff">Diff</option><option value="coffeescript">CoffeeScript</option><option value="html">HTML,XML</option><option value="json">JSON</option><option value="java">Java</option><option value="js">JavaScript</option><option value="markdown">Markdown</option><option value="oc">Objective C</option><option value="php">PHP</option><option value="parl">Perl</option><option value="python">Python</option><option value="ruby">Ruby</option><option value="sql">SQL</option></select>
                                        </div>
                                    </div></div><div class="simditor-popover image-popover"><div class="link-settings">
                                    <div class="settings-field">
                                        <label>图片地址</label>
                                        <input class="image-src" type="text" tabindex="1">

                                    </div>
                                    <div class="settings-field">
                                        <label>图片描述</label>
                                        <input class="image-alt" id="image-alt" type="text" tabindex="1">
                                    </div>
                                    <div class="settings-field">
                                        <label>图片尺寸</label>
                                        <input class="image-size" id="image-width" type="text" tabindex="2">
                                        <span class="times">×</span>
                                        <input class="image-size" id="image-height" type="text" tabindex="3">
                                        <a class="btn-restore" href="javascript:;" title="还原图片尺寸" tabindex="-1">
                                            <span class="simditor-icon simditor-icon-undo"></span>
                                        </a>
                                    </div>
                                </div></div></div>

                                <div class="comt-ctrl">
                                    <div class="comt-tips"><input type="hidden" name="comment_post_ID" value="12668" id="comment_post_ID">
                                        <input type="hidden" name="comment_parent" id="comment_parent" value="0">
                                    </div>
                                    <button type="submit" name="submit" id="submit" tabindex="5"><i class="fa fa-pencil" aria-hidden="true"></i> 分享笔记</button>
                                </div>
                            </div>


                            <div class="comt-comterinfo">
                                <ul id="comment-author-info">
                                    <li class="form-inline"><label class="hide" for="author">昵称</label><input class="ipt" type="text" name="author" id="author" value="" tabindex="2" placeholder="昵称"><span class="text-muted">昵称 (必填)</span></li>
                                    <li class="form-inline"><label class="hide" for="email">邮箱</label><input class="ipt" type="text" name="email" id="email" value="" tabindex="3" placeholder="邮箱"><span class="text-muted">邮箱 (必填)</span></li>
                                    <li class="form-inline"><label class="hide" for="url">引用地址</label><input class="ipt" type="text" name="url" id="url" value="" tabindex="4" placeholder="引用地址"><span class="text-muted">引用地址</span></li>
                                </ul>
                            </div>


                        </div>

                    </form>
                </div>
                <script type="text/javascript">
                    $(function() {
                        //初始化编辑器

                        var editor = new Simditor({
                          textarea: $('#mded'),
                          placeholder: '写笔记...',
                          upload:false,
                         // upload: {url:'/api/comment_upload_file.php',params: null,fileKey: 'upload_file',connectionCount: 1,leaveConfirm: '文件正在上传，您确定离开?'},
                          defaultImage: 'https://www.runoob.com/images/logo.png',
                          codeLanguages: '',
                          autosave: 'editor-content',
                          toolbar: [  'bold','code','ul','ol','image' ]
                        });
                        editor.on('selectionchanged', function() {
                            $(".code-popover").hide();
                        });

                        // 提交数据
                        $("#share_code").click(function() {
                            $(".comment-signarea").hide();
                            $("#commentform").show();

                        });
                        $("#user_add_note").click(function() {
                            $(".comment-signarea").hide();
                            $("#commentform").show();
                            $('html, body').animate({
                                   scrollTop: $("#respond").offset().top
                            }, 200);
                        });

                        // 提交笔记
                        var commentform=$('#commentform');
                        commentform.prepend('<div id="comment-status" style="display:none;" ></div>');
                        var statusdiv=$('#comment-status');

                        commentform.submit(function(e){
                            e.preventDefault();
                            var noteContent = editor.getValue();
                            // console.log(noteContent);
                            noteContent = noteContent.replace(/<pre><code>/g,"<pre>");
                            noteContent = noteContent.replace(/<\/code><\/pre>/g,"</pre>");

                            // 系列化表单数据
                            var comment_parent = 0;
                            var is_user_logged_in = $("#is_user_logged_in").val();
                            var comment_post_ID =  12668;
                            var _wp_unfiltered_html_comment = $("#_wp_unfiltered_html_comment").val();
                            var comment = noteContent;
                            var author = $("#author").val();
                            var url = $("#url").val();
                            var email = $("#email").val();
                            if(isBlank(author) && is_user_logged_in==0) {
                                statusdiv.html('<p  class="ajax-error">请输入昵称！</p>').show();
                            } else if(isBlank(email)  && is_user_logged_in==0) {
                                statusdiv.html('<p  class="ajax-error">请输入邮箱！</p>').show();
                            } else {
                                // var formdata=commentform.serialize() + "&comment=" + noteContent ;
                                // 添加状态信息
                                statusdiv.html('<p>Processing...</p>').show();
                                // 获取表单提交地址
                                var formurl=commentform.attr('action');

                                // 异步提交
                                $.ajax({
                                        type: 'post',
                                        url: formurl,
                                        dataType:'json',
                                        data: {"comment_parent":comment_parent,"comment_post_ID":comment_post_ID, "_wp_unfiltered_html_comment":_wp_unfiltered_html_comment,"comment":comment,"url":url, "email":email,"author":author},
                                        error: function(XMLHttpRequest, textStatus, errorThrown){
                                        statusdiv.html('<p class="ajax-error" >数据不完整或表单提交太快了！</p>').show();
                                    },
                                    success: function(data, textStatus){
                                        if(data.errorno=="0") {
                                            $("#submit").prop('disabled', true);
                                            statusdiv.html('<p class="ajax-success" >笔记已提交审核，感谢分享笔记！</p>').show();
                                            alert('笔记已提交审核，感谢分享笔记！');
                                        }else{
                                            statusdiv.html('<p class="ajax-error" >'+data.msg+'</p>').show();
                                        }
                                        commentform.find('textarea[name=comment]').val('');
                                    }
                                });
                                setTimeout(function(){
                                    $("#submit").prop('disabled', false);
                                }, 10*1000);
                            }
                            return false;

                        });
                        $(".comt-author").click(function() {
                            href = $(this).children("a").attr("href");
                            if(href.indexOf("/note/")!=-1) {
                                var win = window.open(href, '_blank');
                                  win.focus();
                            }
                        });
                        $(".comt-meta span").hover(function(){
                            $(this).children(".tooltip").css({ "opacity": 1, "pointer-events": "auto"});
                        },function(){
                            $(this).children(".tooltip").removeAttr("style");
                        });
                        /*
                        $(".wrapper i").hover(function(){
                            $(this).siblings(".tooltip").css({ "opacity": 1, "pointer-events": "auto"});
                        },function(){
                            $(this).siblings(".tooltip").css({ "opacity": 0, "pointer-events": "auto"});
                        });
                        */
                        //Upvote.create('runoobvote-id', {callback: vote_callback});
                        var ajaxurl = 'https://www.runoob.com/wp-admin/admin-ajax.php';
                        var callback = function(data) {
                            //console.log($('#runoobvote-id').upvote('upvoted'));
                            //console.log($('#runoobvote-id').upvote('downvoted'));
                            //console.log(data);
                            _vote_action = data.action;
                            id_arr = data.id.split('-');
                            um_id= id_arr[2];
                            //console.log(um_id);

                            var re = /^[1-9]+/;
                            if (re.test(um_id)) {
                                var ajax_data = {
                                    _vote_action: _vote_action,
                                    action: "pinglun_zan",
                                    um_id: um_id,
                                    um_action: "ding"
                                };
                                //console.log(ajax_data);
                                $.post(ajaxurl,ajax_data,function(status){
                                    //if(status.vote_num>999) {
                                    //	_voteHtml = '<span style="display: block; text-align: center;font-size: 20px; color: #6a737c; margin: 8px 0;">'+kFormatter(status.vote_num) +'</span>';
                                    //	$("#runoobvote-id-" + um_id + " .count").hide().after(_voteHtml);
                                    //}

                                });
                            }
                        };
                        if($('#comments').length && $('.upvotejs').length){
                            $('.upvotejs').upvote({id: 12668, callback: callback});

                            $.post(ajaxurl,{"action":"pinglun_zan","postid":12668},function(data){
                                $(data).each(function(key,value) {
                                    $("#runoobvote-id-" + value.commid + " .upvote").addClass(value.upvotejs_class);
                                    $("#runoobvote-id-" + value.commid + " .downvote").addClass(value.downvote_class);
                                    $("#runoobvote-id-" + value.commid + " .count").text(value.upvote_count);
                                })
                            },'json');

                        }


                    });
                    function isBlank(str) {
                        return (!str || /^\s*$/.test(str));
                    }
                    function kFormatter(num) {
                        // return num;
                        return Math.abs(num) > 999 ? Math.sign(num)*((Math.abs(num)/1000).toFixed(1)) + 'k' : Math.sign(num)*Math.abs(num)
                    }

                </script>

                <link rel="stylesheet" href="/wp-content/themes/runoob/assets/css/qa.css?1.45">
                <link rel="stylesheet" type="text/css" href="https://lf9-cdn-tos.bytecdntp.com/cdn/expire-1-M/simditor/2.3.6/styles/simditor.min.css">
                <script type="text/javascript" src="https://static.jyshare.com/assets/simditor/2.3.6/scripts/module.js"></script>
                <script type="text/javascript" src="//static.jyshare.com/assets/simditor/2.3.6/scripts/hotkeys.js"></script>
                <script type="text/javascript" src="//static.jyshare.com/assets/simditor/2.3.6/scripts/uploader.js"></script>
                <script type="text/javascript" src="https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/simditor/2.3.6/lib/simditor.min.js"></script>
                <script type="text/javascript" src="https://static.jyshare.com/assets/simditor/2.3.6/scripts/simditor-autosave.js"></script>
                <div class="article-heading-ad" id="w3cnote-ad728">
                    <script async="" src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
                    <!-- 移动版 自动调整 -->
                    <ins class="adsbygoogle" style="display:inline-block;min-width:300px;max-width:970px;width:100%;height:90px" data-ad-client="ca-pub-5751451760833794" data-ad-slot="1691338467" data-ad-format="horizontal" data-adsbygoogle-status="done"><div id="aswift_2_host" style="border: none; height: 90px; width: 967px; margin: 0px; padding: 0px; position: relative; visibility: visible; background-color: transparent; display: inline-block;"></div></ins>
                    <script>
                        (adsbygoogle = window.adsbygoogle || []).push({});
                    </script>
                </div>
                <style>
                    @media screen and (max-width: 768px) {
                        #w3cnote-ad728 {
                            display: none;
                        }
                    }
                    p.note-author {
                        border-bottom: 1px solid #ddd;
                        font-size: 18px;
                        font-weight: bold;
                        color: #78a15a;
                        padding-bottom: 2px;
                        margin-bottom: 4px;
                    }
                </style>
                <script>
                    var aid = 12668;
                </script>
            </div>

        </div>
        <div class="listcol last right-column">




            <!--
                <div class="tab tab-light-blue"> 订阅</div>
                <div class="sidebar-box">
                    <div class="socialicons">
                        <a href="//www.runoob.com/feed" class="rss">RSS 订阅</a>

                        <form action="//list.qq.com/cgi-bin/qf_compose_send" method="post">
                        <input type="hidden" value="qf_booked_feedback" name="t">
                        <input type="hidden" value="4b67b6b6c1f5e792559940cab4aebb8f1126fba880bff1a8" name="id">
                        <input class="placeholder" id="feed_email" name="to" value="输入邮箱 订阅笔记" autocomplete="off">
                        <input type="submit" value="订阅" class="btn btn-primary">
                        </form>

                    </div>

                </div>
            -->



            <!--
                <div class="sidebar-box cate-list">
                <div class="sidebar-box recommend-here list-link">
                        <a href="javascript:void(0);" style="font-size: 16px; color:#64854c;font-weight:bold;">笔记列表</a>
                    </div>



            </div>
            -->
            <div class="sidebar-box cate-list" style="display:none;">
                <div class="sidebar-box recommend-here list-link">
                    <a href="javascript:void(0);" style="font-size: 16px; color:#64854c;font-weight:bold;">热门文章</a>
                </div>
                <div class="membership">
                    <ul class="membership">
                        <li><a target="_blank" href="https://mp.weixin.qq.com/s/ZaP6YNgKTCHYy3r2WPBBaw" title="2024 年 04 月 JavaScript 框架排行榜">2024 年 04 月 JavaScript 框架排行榜</a></li>
                        <li><a target="_blank" href="https://mp.weixin.qq.com/s/JBR2twC0t6krjjuxqvhsEQ" title="免费、开源、好用的 SQL 客户端合集">免费、开源、好用的 SQL 客户端合集</a></li>
                        <li><a target="_blank" href="https://mp.weixin.qq.com/s/TwV3YQjA1glyaW7TiHvhlA" title="优雅的代码规范，提升代码质量">优雅的代码规范，提升代码质量</a></li>
                        <li><a target="_blank" href="https://mp.weixin.qq.com/s/CnUJ-2OHPbBKlnVpjDzavA" title="命令行中的趣味世界，牛也能说话，有趣又好玩">命令行中的趣味世界，牛也能说话，有趣又好玩</a></li>
                        <li><a target="_blank" href="https://mp.weixin.qq.com/s/7NKl-mD7N8CeSNQlbKDEWA" title="2024 年 05 月编程语言排行榜，Fortran 进入前 10 名，发生了什么？">2024 年 05 月编程语言排行榜，Fortran 进入前 10 名，发生了什么？</a></li>
                        <li><a target="_blank" href="https://mp.weixin.qq.com/s/yWlSVDKobtDhThnhirVRpw" title="免费开源的 IDE、数据库管理工具、SSH客户端和FTP客户端">免费开源的 IDE、数据库管理工具、SSH客户端和FTP客户端</a></li>
                    </ul>
                </div>
            </div>

            <div class="sidebar-box cate-list">


                <div class="sidebar-box recommend-here list-link">
                    <a href="javascript:void(0);" style="font-size: 16px; color:#64854c;font-weight:bold;">教程列表</a>
                </div>

                <div class="cate-items">
                    <a href="http://www.runoob.com/ado">ADO 教程</a>
                    <a href="http://www.runoob.com/ajax">Ajax 教程</a>
                    <a href="http://www.runoob.com/android">Android 教程</a>
                    <a href="http://www.runoob.com/angularjs2">Angular2 教程</a>
                    <a href="http://www.runoob.com/angularjs">AngularJS 教程</a>
                    <a href="http://www.runoob.com/appml">AppML 教程</a>
                    <a href="http://www.runoob.com/asp">ASP 教程</a>
                    <a href="http://www.runoob.com/aspnet">ASP.NET 教程</a>
                    <a href="http://www.runoob.com/bootstrap">Bootstrap 教程</a>
                    <a href="http://www.runoob.com/bootstrap4">Bootstrap4 教程</a>
                    <a href="http://www.runoob.com/bootstrap5">Bootstrap5 教程</a>
                    <a href="http://www.runoob.com/cprogramming">C 教程</a>
                    <a href="http://www.runoob.com/csharp">C# 教程</a>
                    <a href="http://www.runoob.com/cplusplus">C++ 教程</a>
                    <a href="http://www.runoob.com/chartjs">Chart.js 教程</a>
                    <a href="http://www.runoob.com/cssref">CSS 参考手册</a>
                    <a href="http://www.runoob.com/css">CSS 教程</a>
                    <a href="http://www.runoob.com/css3">CSS3 教程</a>
                    <a href="http://www.runoob.com/django">Django 教程</a>
                    <a href="http://www.runoob.com/docker">Docker 教程</a>
                    <a href="http://www.runoob.com/dtd">DTD 教程</a>
                    <a href="http://www.runoob.com/echarts">ECharts 教程</a>
                    <a href="http://www.runoob.com/eclipse">Eclipse 教程</a>
                    <a href="http://www.runoob.com/fastapi">FastAPI 教程</a>
                    <a href="http://www.runoob.com/firebug">Firebug 教程</a>
                    <a href="http://www.runoob.com/font-awesome">Font Awesome 图标</a>
                    <a href="http://www.runoob.com/foundation">Foundation 教程</a>
                    <a href="http://www.runoob.com/git">Git 教程</a>
                    <a href="http://www.runoob.com/go">Go 语言教程</a>
                    <a href="http://www.runoob.com/googleapi">Google 地图 API 教程</a>
                    <a href="http://www.runoob.com/highcharts">Highcharts 教程</a>
                    <a href="http://www.runoob.com/htmldom">HTML DOM 教程</a>
                    <a href="http://www.runoob.com/tags">HTML 参考手册</a>
                    <a href="http://www.runoob.com/charsets">HTML 字符集</a>
                    <a href="http://www.runoob.com/html">HTML 教程</a>
                    <a href="http://www.runoob.com/http">HTTP 教程</a>
                    <a href="http://www.runoob.com/ionic">ionic 教程</a>
                    <a href="http://www.runoob.com/ios">iOS 教程</a>
                    <a href="http://www.runoob.com/java">Java 教程</a>
                    <a href="http://www.runoob.com/jsref">JavaScript 参考手册</a>
                    <a href="http://www.runoob.com/js">Javascript 教程</a>
                    <a href="http://www.runoob.com/jeasyui">jQuery EasyUI 教程</a>
                    <a href="http://www.runoob.com/jquerymobile">jQuery Mobile 教程</a>
                    <a href="http://www.runoob.com/jqueryui">jQuery UI 教程</a>
                    <a href="http://www.runoob.com/jquery">jQuery 教程</a>
                    <a href="http://www.runoob.com/json">JSON 教程</a>
                    <a href="http://www.runoob.com/jsp">JSP 教程</a>
                    <a href="http://www.runoob.com/julia">Julia 教程</a>
                    <a href="http://www.runoob.com/kotlin">Kotlin 教程</a>
                    <a href="http://www.runoob.com/linux">Linux 教程</a>
                    <a href="http://www.runoob.com/lua">Lua 教程</a>
                    <a href="http://www.runoob.com/markdown">Markdown 教程</a>
                    <a href="http://www.runoob.com/matplotlib">Matplotlib 教程</a>
                    <a href="http://www.runoob.com/maven">Maven 教程</a>
                    <a href="http://www.runoob.com/memcached">Memcached 教程</a>
                    <a href="http://www.runoob.com/mongodb">MongoDB 教程</a>
                    <a href="http://www.runoob.com/mysql">MySQL 教程</a>
                    <a href="http://www.runoob.com/nodejs">Node.js 教程</a>
                    <a href="http://www.runoob.com/numpy">NumPy 教程</a>
                    <a href="http://www.runoob.com/pandas">Pandas 教程</a>
                    <a href="http://www.runoob.com/perl">Perl 教程</a>
                    <a href="http://www.runoob.com/php">PHP 教程</a>
                    <a href="http://www.runoob.com/postgresql">PostgreSQL 教程</a>
                    <a href="http://www.runoob.com/python3">Python 3 教程</a>
                    <a href="http://www.runoob.com/python">Python 基础教程</a>
                    <a href="http://www.runoob.com/python-qt">Python 量化交易</a>
                    <a href="http://www.runoob.com/r">R 教程</a>
                    <a href="http://www.runoob.com/rdf">RDF 教程</a>
                    <a href="http://www.runoob.com/react">React 教程</a>
                    <a href="http://www.runoob.com/redis">Redis 教程</a>
                    <a href="http://www.runoob.com/rss">RSS 教程</a>
                    <a href="http://www.runoob.com/ruby">Ruby 教程</a>
                    <a href="http://www.runoob.com/rust">Rust 教程</a>
                    <a href="http://www.runoob.com/sass">Sass 教程</a>
                    <a href="http://www.runoob.com/scala">Scala 教程</a>
                    <a href="http://www.runoob.com/scipy">SciPy 教程</a>
                    <a href="http://www.runoob.com/servlet">Servlet 教程</a>
                    <a href="http://www.runoob.com/soap">SOAP 教程</a>
                    <a href="http://www.runoob.com/sql">SQL 教程</a>
                    <a href="http://www.runoob.com/sqlite">SQLite 教程</a>
                    <a href="http://www.runoob.com/svg">SVG 教程</a>
                    <a href="http://www.runoob.com/svn">SVN 教程</a>
                    <a href="http://www.runoob.com/swift">Swift 教程</a>
                    <a href="http://www.runoob.com/tcpip">TCP/IP 教程</a>
                    <a href="http://www.runoob.com/typescript">TypeScript 教程</a>
                    <a href="http://www.runoob.com/vbscript">VBScript 教程</a>
                    <a href="http://www.runoob.com/vue2">Vue.js 教程</a>
                    <a href="http://www.runoob.com/vue3">Vue3 教程</a>
                    <a href="http://www.runoob.com/w3c">W3C 教程</a>
                    <a href="http://www.runoob.com/webservices">Web Service 教程</a>
                    <a href="http://www.runoob.com/wsdl">WSDL 教程</a>
                    <a href="http://www.runoob.com/xlink">XLink 教程</a>
                    <a href="http://www.runoob.com/dom">XML DOM 教程</a>
                    <a href="http://www.runoob.com/schema">XML Schema 教程</a>
                    <a href="http://www.runoob.com/xml">XML 教程</a>
                    <a href="http://www.runoob.com/xpath">XPath 教程</a>
                    <a href="http://www.runoob.com/xquery">XQuery 教程</a>
                    <a href="http://www.runoob.com/xslfo">XSLFO 教程</a>
                    <a href="http://www.runoob.com/xsl">XSLT 教程</a>
                    <a href="http://www.runoob.com/zig">Zig 教程</a>
                    <a href="http://www.runoob.com/data-structures">数据结构</a>
                    <a href="http://www.runoob.com/regexp">正则表达式</a>
                    <a href="http://www.runoob.com/quiz">测验</a>
                    <a href="http://www.runoob.com/browsers">浏览器</a>
                    <a href="http://www.runoob.com/quality">网站品质</a>
                    <a href="http://www.runoob.com/web">网站建设指南</a>
                    <a href="http://www.runoob.com/hosting">网站服务器教程</a>
                    <a href="http://www.runoob.com/design-pattern">设计模式</a>

                </div>
            </div>
        </div>
    </div>
</div>